<script>
  import $ from '../dfish.js'
  import {h} from 'vue'
  import Dialog from './Dialog.vue'
  import Img from './Img.vue'

  export default {
    name: 'w-loading',
    mixins: [Dialog],
    props: ['text', 'icon'],
    methods: {
      x_default() {
        return {
          //local: true,
        }
      },
      html_slots() {
        return h(Img, {
          src: this.x.icon !== undefined ? this.x.icon : '#f-svg-loading',
          text: this.x.text !== undefined ? this.x.text : $.loc.loading
        })
      }
    },
    computed: {
      html_class() {
        return 'w-dialog'
      }
    }
  }
</script>

<style>
  .w-loading {
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    box-shadow: none;
  }

  .w-loading .f-svg {
    width: 30px;
    height: 30px;
    fill: #fff;
  }
  .w-loading .f-svg>use {
    stroke: #fff;
  }
</style>
